<?php ob_start() ?>

<div class="jumbotron">
    <div class="container">
        <?php if (isset($_SESSION['betporra_msj'])) { ?>
            <div class="alert alert-success alert-dismissable col-lg-12 text-center">
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                <?php echo $_SESSION['betporra_msj'] ?>
            </div>
            <?php
            unset($_SESSION['betporra_msj']);
        }
        ?>

        <div class = "text-center">
            <h1><i class = "fa fa-trophy"></i> <?php echo LABEL_MIPERFIL ?></h1>
        </div>
        <div class = "row panel panel-body margin-top20 animated fadeIn">
            <h3><?php echo LABEL_MIPERFILCAMBIARAVATAR ?></h3>
            <hr>
            <div class = "col-lg-6 col-md-12 col-sm-6 col-xs-12">
                <div class = "row">
                    <div class="col-lg-4 col-md-3 col-sm-3 col-xs-4">
                        <img class = "img-rounded img-responsive" width = "75%" src = "web/images/users/<?php echo $obj_usuario->imagen; ?>">
                    </div>
                    <div class="col-lg-8 col-md-9 col-sm-8 col-xs-8">
                        <div class = "description-avatar" style = "padding-top:12px;">
                            <p style = "font-size:12px; color:#999;">Tamaño máximo <b>2 Mb</b> (formato .jpg, .jpeg, .gif, .png).<br>
                                Mínimo: 40x40 | Máximo: 2000x2000
                            <p style = "font-size:12px; color:#999; margin-top:-11px; margin-bottom:20px;"><i>Tamaño ideal: 300x300px</i></p>
                        </div>
                    </div>
                </div><!--/.row -->
            </div><!--/.col-lg-6 -->
            <div class="col-lg-6 col-md-12 col-sm-6 col-xs-12">
                <div class = "row form-group">
                    <form id="form_avatar" class = "form-horizontal" role = "form" action = "modificar_imagen" method = "POST" enctype = "multipart/form-data">
                        <div class="">
                            <label for = "archivo"><?php echo LABEL_MIPERFILARCHIVO ?></label>
                            <input type="file" class="filestyle" data-buttonName="btn-primary" name="archivo" accept="image/jpeg, image/gif, image/png" required="required" id="archivo">
                        </div>
                        <div style = "margin-top: 20px; float: right;">
                            <button type="submit" class="btn btn-primary"><?php echo LABEL_MIPERFILCAMBIARAVATAR ?></button>
                        </div>
                    </form>
                </div><!--/.row -->
            </div><!--/.col-lg-6 -->
        </div><!--/.row panel panel-body -->
        <div class = "row panel panel-body animated fadeIn">
            <div class="col-lg-12">
                <h3><?php echo LABEL_MIPERFILDATOS ?></h3>
                <hr>
                <form id="form_datos_personales" name="form_datos_personales" method="POST" action="modificar_perfil">
                    <div class="row column-seperation">
                        <div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
                            <div class="row">
                                <div class="col-md-12">
                                    <span class="semi-bold">Email:</span>
                                    <input name="email" id="email" type="text" class="form-control" placeholder="Email" value="<?php echo $obj_usuario->get_email() ?>" disabled="disabled">
                                </div>
                            </div>
                            <div class="row margin-top20">
                                <div class="col-md-12">
                                    <span class="semi-bold"><?php echo LABEL_MIPERFILUSUARIO ?> <span class="required">*</span>:</span>
                                    <input name="usuario" id="usuario" type="text" class="form-control" placeholder="Nombre de usuario" value="<?php echo $obj_usuario->usuario ?>" disabled="disabled">
                                </div>
                            </div>
                            <div class="row margin-top20">
                                <div class="col-md-12">
                                    <span class="semi-bold"><?php echo LABEL_MIPERFILNOMBRE ?> <span class="required">*</span>:</span>
                                    <input id="nombre" type="text" name="nombre" class="form-control" placeholder="Nombre Completo" value="<?php echo $obj_usuario->nombre ?>">
                                </div>
                            </div>
                            <div class="row margin-top20">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <span class="semi-bold"><?php echo LABEL_MIPERFILFECHANAC ?> <span class="required">*</span>:</span>
                                        <div class="input-group date">
                                            <input name="fecha_nacimiento" id="fecha_nacimiento" type="text" class="form-control" placeholder="Fecha de Nacimiento" value="<?php echo date('d-m-Y', strtotime($obj_usuario->fecha_nacimiento)); ?>">
                                            <span class="input-group-addon"><span class="fa fa-calendar"></span>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
                            <div class="row">
                                <div class="col-md-12">
                                    <span class="semi-bold"><?php echo LABEL_MIPERFILDIRECCION ?>:</span>
                                    <input name="direccion" id="direccion" type="text" class="form-control" placeholder="Dirección" value="<?php echo $obj_usuario->direccion ?>">
                                </div>
                            </div>
                            <div class="row margin-top20">
                                <div class="col-md-12">
                                    <span class="semi-bold"><?php echo LABEL_MIPERFILPROVINCIA ?>:</span>
                                    <input name="provincia" id="provincia" type="text" class="form-control" placeholder="Provincia" value="<?php echo $obj_usuario->provincia ?>">
                                </div>
                            </div>
                            <div class="row margin-top20">
                                <div class="col-md-12">
                                    <span class="semi-bold"><?php echo LABEL_MIPERFILPOBLACION ?>:</span>
                                    <input id="poblacion" type="text" name="poblacion" class="form-control" placeholder="Población" value="<?php echo $obj_usuario->poblacion ?>">
                                </div>
                            </div>
                            <div class="row margin-top20">
                                <div class="col-md-12">
                                    <span class="semi-bold"><?php echo LABEL_MIPERFILCP ?>:</span>
                                    <input name="cp" id="cp" type="text" class="form-control" placeholder="Código Postal" value="<?php echo $obj_usuario->cp; ?>">
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-12 col-sm-12 col-xs-12" style="border: none;">
                            <div class="row">
                                <div class="col-md-12">
                                    <span class="semi-bold" style="color:#444; font-size:14px; margin-top:-5px;"><i class="fa fa-twitter"></i> Twitter</span>
                                    <input name="twitter" id="twitter" type="text" class="form-control" placeholder="www.twitter.com/username" value="<?php echo $obj_usuario->twitter ?>">
                                </div>
                            </div>
                            <div class="row margin-top20">
                                <div class="col-md-12">
                                    <span class="semi-bold" style="color:#444; font-size:14px; margin-top:-5px;"><i class="fa fa-facebook"></i> Facebook</span>
                                    <input name="facebook" id="facebook" type="text" class="form-control" placeholder="www.facebook.com/username" value="<?php echo $obj_usuario->facebook ?>">
                                </div>
                            </div>
                            <div class="row margin-top20">
                                <div class="col-md-12">
                                    <span class="semi-bold" style="color:#444; font-size:14px; margin-top:-5px;"><i class="fa fa-plus"></i> Google+</span>
                                    <input name="googleplus" id="googleplus" type="text" class="form-control" placeholder="plus.google.com/+username" value="<?php echo $obj_usuario->googleplus ?>">
                                </div>
                            </div>
                            <div class="row margin-top20">
                                <div class="col-md-12">
                                    <span class="semi-bold" style="color:#444; font-size:14px; margin-top:-5px;"><i class="fa fa-youtube"></i> Youtube</span>
                                    <input name="youtube" id="youtube" type="text" class="form-control" placeholder="www.youtube.com/user/username" value="" disabled>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-12 margin-top20" style="padding-right: 0px;">
                        <button type="submit" class="btn btn-primary pull-right"><?php echo LABEL_MIPERFILGUARDAR ?></button>
                    </div>
                </form>
            </div>

        </div>
        <div class="row panel panel-body animated fadeIn">
            <div class="col-lg-12">
                <form id="form_password" name="form_password" method="POST" action="modificar_clave">
                    <h3><?php echo LABEL_MIPERFILCAMBIARCLAVE ?></h3>
                    <hr>
                    <div class = "row">
                        <div class = "col-md-4">
                            <div class="form-group">
                                <label for = "password_old"><?php echo LABEL_MIPERFILCLAVEACTUAL ?></label>
                                <input id = "password_old" class="form-control" type = "password" placeholder = "Escribe tu contraseña actual" name = "password_old">
                            </div>
                        </div>
                        <div class = "col-md-4">
                            <div class="form-group">
                                <label for = "password"><?php echo LABEL_MIPERFILCLAVENUEVA ?></label>
                                <input id = "password" type = "password" class = "form-control" placeholder = "Escribe tu contraseña nueva" name = "password">
                            </div>
                        </div>
                        <div class = "col-md-4">
                            <div class="form-group">
                                <label for = "confirm_password"><?php echo LABEL_MIPERFILCLAVECONFIR ?></label>
                                <input id = "confirm_password" type = "password" class = "form-control" placeholder = "Escribe tu contraseña nueva otra vez" name = "confirm_password">
                            </div>
                        </div>
                    </div>
                    <div class = "row" style = "margin-top: 20px;">
                        <div class = "col-md-6">
                            <p style = "color:#999; font-size:1em;"><?php echo LABEL_MIPERFILCLAVETEXTO ?> (Ejem: 45DAS552dsASs.)</p>
                        </div>
                        <div class = "col-md-6">
                            <button type = "submit" class = "btn btn-primary pull-right"><?php echo LABEL_MIPERFILCLAVEGUARDAR ?></button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

    </div><!--/.container -->
</div><!--/.jumbotron -->

<script type = "text/javascript" >
    $(document).ready(function() {

        $('#form_avatar').bootstrapValidator({
            message: 'Datos no validos',
            feedbackIcons: {
                valid: 'fa fa-check',
                invalid: 'fa fa-times',
                validating: 'fa fa-refresh fa-spin'
            },
            live: 'enabled',
            submitButtons: 'button[type="submit"]',
            submitHandler: null,
            trigger: null,
            fields: {
                archivo: {
                    validators: {
                        notEmpty: {
                            message: 'El archivo no puede estar vacio.'
                        },
                        file: {
                            extension: 'jpeg,JPEG,jpg,JPG,png,PNG,gif,GIF',
                            type: 'image/jpeg,image/JPEG,image/jpg,image/JPG,image/png,image/PNG,image/gif,image/GIF',
                            maxSize: 2048 * 1024, // 2 MB
                            message: 'El archivo no es valido.'
                        }
                    }
                }

            }
        });

        $('#form_datos_personales').bootstrapValidator({
            message: 'Datos no validos',
            feedbackIcons: {
                valid: 'fa fa-check',
                invalid: 'fa fa-times',
                validating: 'fa fa-refresh fa-spin'
            },
            live: 'enabled',
            submitButtons: 'button[type="submit"]',
            submitHandler: null,
            trigger: null,
            fields: {
                nombre: {
                    validators: {
                        notEmpty: {
                            message: 'El nombre no puede estar vacio.'
                        },
                        stringLength: {
                            min: 3,
                            max: 45,
                            message: 'El nombre debe tener entre 3 y 15 caracteres.'
                        },
                        regexp: {
                            regexp: /^[a-zA-ZñÑáéíóúÁÉÍÓÚ0-9_\s]+$/,
                            message: 'El nombre solo puede contener caracteres alfanuméricos y barra baja.'
                        }
                    }
                },
                fecha_nacimiento: {
                    validators: {
                        notEmpty: {
                            message: 'La Fecha de Nacimiento no puede estar vacio.'
                        },
                        date: {
                            format: 'DD-MM-YYYY',
                            message: 'Formato de fecha de nacimiento invalida (DD-MM-YYYY)'
                        }
                    }
                },
                direccion: {
                    validators: {
                        regexp: {
                            regexp: /^[a-zA-ZñÑáéíóúÁÉÍÓÚ0-9_/,.\s]+$/,
                            message: 'La dirección solo puede contener caracteres alfanuméricos.'
                        }
                    }
                },
                provincia: {
                    validators: {
                        regexp: {
                            regexp: /^[a-zA-ZñÑáéíóúÁÉÍÓÚ0-9_/,.\s]+$/,
                            message: 'La Provincia solo puede contener caracteres alfanuméricos.'
                        }
                    }
                },
                poblacion: {
                    validators: {
                        regexp: {
                            regexp: /^[a-zA-ZñÑáéíóúÁÉÍÓÚ0-9_/,.\s]+$/,
                            message: 'La Población solo puede contener caracteres alfanuméricos.'
                        }
                    }
                },
                cp: {
                    validators: {
                        regexp: {
                            regexp: /^([1-9]{2}|[0-9][1-9]|[1-9][0-9])[0-9]{3}$/,
                            message: 'El código postal solo puede contener caracteres númericos.'
                        }
                    }
                }
            }
        });


        $('#form_password').bootstrapValidator({
            message: 'Datos no validos',
            feedbackIcons: {
                valid: 'fa fa-check',
                invalid: 'fa fa-times',
                validating: 'fa fa-refresh fa-spin'
            },
            live: 'enabled',
            submitButtons: 'button[type="submit"]',
            submitHandler: null,
            trigger: null,
            fields: {
                password_old: {
                    validators: {
                        notEmpty: {
                            message: 'La contraseña antigua no puede estar vacio.'
                        },
                        stringLength: {
                            min: 4,
                            max: 45,
                            message: 'La contraseña antigua debe tener entre 4 y 45 caracteres.'
                        }
                    }
                },
                password: {
                    validators: {
                        notEmpty: {
                            message: 'La contraseña no puede estar vacio.'
                        },
                        identical: {
                            field: 'confirm_password',
                            message: 'La contraseña y confirmar contraseña deben ser iguales'

                        },
                        stringLength: {
                            min: 4,
                            max: 45,
                            message: 'La contraseña debe tener entre 4 y 45 caracteres.'
                        }
                    }
                },
                confirm_password: {
                    validators: {
                        notEmpty: {
                            message: 'La contraseña no puede estar vacio.'
                        },
                        identical: {
                            field: 'password',
                            message: 'La contraseña y confirmar contraseña deben ser iguales'

                        },
                        stringLength: {
                            min: 4,
                            max: 45,
                            message: 'La contraseña debe tener entre 4 y 45 caracteres.'
                        }
                    }
                },
                terminos: {
                    validators: {
                        notEmpty: {
                            message: 'Debe Aceptar los terminos.'
                        }
                    }
                }

            }
        });
    });

    /*function addClassActive() {
     $('#menu_anuncios').addClass(' active');
     };
     
     function removeClassActive(){
     $('.active').removeClass();
     };
     
     $(document).ready(function() {
     removeClassActive();
     addClassActive();
     });*/
</script>
<?php
$contenido = ob_get_clean();
include 'app/templates/plantilla_privada.php';
?>

